<template>
  <div>
    <tool-bar nav="" title='利息模拟器'></tool-bar>


    <el-card>
      <template #header>
        <div class="card-header">
          <span>产品信息</span>
        </div>
      </template>
      <div class="card">

        <el-input v-model="product.amount">
          <template #prepend>合同金额</template>
        </el-input>
        <el-input v-model="product.dunRate">
          <template #prepend>趸交</template>
        </el-input>
        <el-input v-model="product.periods">
          <template #prepend>期限</template>
        </el-input>
        <el-input v-model="product.dayRate">
          <template #prepend>日息</template>
        </el-input>
        <el-input v-model="product.faRate">
          <template #prepend>罚息</template>
        </el-input>
        <el-input v-model="product.zhanRate">
          <template #prepend>展期手续费</template>
        </el-input>
        <el-input v-model="product.ivaRate">
          <template #prepend>IVA</template>
        </el-input>
      </div>
    </el-card>

    <div style="text-align: center;margin: 10px;">
      <el-button @click="compute_click">计算</el-button>
      <el-button @click="add_click">添加行</el-button>
      <el-button @click="zhan_click">展期</el-button>
    </div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>计算结果</span>
        </div>
      </template>


      <input-table v-if="isValid"
                   :buttons="false"
                   v-model="$data.list" @add="add_click"
                   :canRemove="scope=> scope.row.index == $data.list.length">
        <el-table-column align="center" label="日息额总计">
          <template v-slot="scope">
            <div>{{ scope.row.dayAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="罚息额总计">
          <template v-slot="scope">
            <div>{{ scope.row.faAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="利润">
          <template v-slot="scope">
            <div>{{ scope.row.profit }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="IVA总计">
          <template v-slot="scope">
            <div>{{ scope.row.ivaAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当期还款额">
          <template v-slot="scope">
            <el-input v-model="scope.row.payed"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结清应付">
          <template v-slot="scope">
            <div>{{ scope.row.total }}</div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button v-if="scope.row.isLast" @click="delete_click(scope.row.index)">删除</el-button>
          </template>
        </el-table-column>
      </input-table>
      <div style="text-align: center;margin: 10px;">
        <el-button @click="zhan_click" v-if="product.periods > 0 && $data.list.length > product.periods">展期
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.card {
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid {
  position: relative;
  margin-left: 20px !important;
  margin-top: 20px !important;

  display: flex;

  ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
    min-height: 60vh !important;
    height: 70vh;
  }
}

.op_column {
  padding-top: 150px;
  padding-bottom: 150px;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  align-content: space-around;
  position: relative;


  button {
    display: block;
    margin: 5px 2px;
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}

</style>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
  name: "array-js",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  product: {amount: "", dunRate: "", periods: "", dayRate: "", faRate: "", zhanRate: "", ivaRate: ""},
  list: []
});

const product = $computed(() => $data.product);

const add_click = () => {
  var v = {};
  v.index = $data.list.length + 1;
  v.isLast = true;
  v.payed = 0;
  v.total = 0;

  $data.list.forEach(item => {
    item.isLast = false;
  });

  $data.list.push(v);

  nextTick(() => {
    compute_row(v);
  })
}

const delete_click = index => {
  $data.list.splice(index - 1, 1);
  $data.list[$data.list.length - 1].isLast = true;
}

const isValid = $computed(() => {
  return product.amount && product.dunRate && product.periods && product.dayRate && product.faRate && product.zhanRate && product.ivaRate && product.ivaRate && product.ivaRate;
})

const toNumber = row => {
  Object.keys(row).forEach(key => {
    var value = row[key];
    if (!value) {
      return;
    }

    var type = row[key].getJsType();
    if (type == "number") {
      row[key] = row[key].ToRound(8);
    } else if (type == "string") {
      row[key] = parseFloat(row[key]).ToRound(8);
    }
  })
}

const compute_row = row => {
  var p = Object.assign({}, product);

  toNumber(p);
  toNumber(row);
  row.dayAmount = p.dayRate * row.index * p.amount;
  row.faAmount = 0;
  if (row.index > p.periods) {
    row.faAmount = p.faRate * (row.index - p.periods) * p.amount;
  }

  row.profit = row.dayAmount + row.faAmount;
  row.ivaAmount = row.profit * p.ivaRate;

  row.total = p.amount + row.profit + row.ivaAmount;


  toNumber(row);
}

const compute_click = (e) => {
  if (!isValid) {
    return;
  }

  jv.$saveData("product", product);


  $data.list.forEach(it => {
    compute_row(it);
  });
}

const zhan_click = () => {

}

onMounted(function () {
  jv.$loadData("product", v => $data.product = v);
})


</script>
